<template>
    <div>
        <ul class="banxin" v-show="AllOrMore">
            <li>排序:</li>
            <li v-for="(item,index) in sort" 
            :key="item" 
            :class="{active:isCheckSort === index}"
            @click="sortInfo(index)"
            >{{item}}</li>
        </ul>
        <ul class="banxin" v-show="AllOrMore">
            <li>分类:</li>
            <li v-for="(item,index) in classify" 
            :key="item" 
            :class="{active:isCheckClassify === index}"
            @click="classifyInfo(index)"
            >{{item}}</li>
        </ul>

        <!--属性
            AllInfo : 所有的数组 

            数据接口 products
            请求体: {
                都是可选参数 ,
                这些是进行筛查请求的
                did : 
                type :
                nim :
                max :
                keyword :
            }
        -->
        <!-- 这当中所有的内容都是可以点击的 
        点击就获取当前页的信息
        作为一个li标签的子组件 , 在需要时显示 -->
        <Lis :AllInfo="info" v-show="AllOrMore" @MyChangeAllOrMore="changeAllOrMore" />
        <MoreGoodsInfo v-if="!AllOrMore" />
        <!-- <Lis :AllInfo="info" @MyChangeAllOrMore="changeAllOrMore" />
        <MoreGoodsInfo /> -->
        
    </div>
</template>

<script>
import Lis from "@/components/ShopLis.vue";
import MoreGoodsInfo from "@/components/MoreGoodsInfo.vue";
import { products } from "@/request/Api";
export default {
    data () {
        return {
            // 请求到的数据
            info : [],
            // 排序的数组
            isCheckSort : 0,
            sort : ['全部','我能兑换的','0-1000分','1000-3000分','3000-9000分','9000+分'],
            // 对应的发送请求携带的信息
            sortInfomation:[
                {
                    keyword : ''
                },
                {
                },
                {
                    min : 0,
                    max : 1000
                },
                {
                    min : 1000,
                    max : 3000
                },
                {
                    min : 3000,
                    max : 9000
                },
                {
                    min : 9000,
                    max : 30000
                }
            ],
            // 分类的数组
            isCheckClassify :0,
            classify : ['全部','实物商品','虚拟商品'],
            key : '',
            // 控制显示的是当前页面还是商品详情页 默认当前页面All
            // 给一个方法改变它的值
            AllOrMore : true
        }
    },
    components:{
        Lis,
        MoreGoodsInfo
    },
    created(){
        this.keyword = this.$route.query.keyword
        products({
            // 直接携带参数进行请求
            keyword : this.keyword
        }).then((res)=>{
            if(res.data.code === 0){
                // 最终数据 res.data.data
                this.info =res.data.data
            }
        })
    },
    watch :{
        "$route.query.keyword" :{
            handler(n,ol){
                this.$router.go(0)

            }
        }
    },
    methods :{
        sortInfo(index){
            this.isCheckSort = index;
            // 请求
            products({
                    keyword : this.keyword,
                    ...this.sortInfomation[this.isCheckSort],
                    type : this.isCheckClassify
                    
                }).then((res)=>{
                if(res.data.code === 0){
                    this.info =res.data.data
                }
            })
        },
        // 改变当前显示组件的函数 使用$emit传递
        changeAllOrMore(c){
            this.AllOrMore = c
        },
        classifyInfo(index){
            this.isCheckClassify = index
            products({
                    ...this.sortInfomation[this.isCheckSort],
                    type : this.isCheckClassify
                }).then((res)=>{
                if(res.data.code === 0){
                    console.log(1);
                    this.info =res.data.data
                }
            })
            

        }
    }
}
</script>
 
<style lang = "less" scoped>
@import '@/assets/base.less';
    ul {
        margin-top: 20px;
        font-size: 16px;
        display: flex;
        :nth-child(1){
            margin-left:0;
            font-weight:bold;

        }
      li {
        margin: 0 10px;
        cursor: pointer;
        
        &.active {
            color: @blue;
            font-weight: bold;
        }
      }  
    }
</style>